import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
import { useHomeWorksStore } from '@/domain/correction/hooks/homeWork';
import { useImageStore } from '@/domain/correction/hooks/image';
import { AnswersID } from '@/domain/correction/types';
import { ESubmitType } from '@/domain/correction/types/jobs/homeWork';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';

export default defineComponent({
  name: 'correctEditor',
  props: {
    setCurrent: {
      type: Function,
      default: () => {}
    },
    setBySubjectCurrent: {
      type: Function,
      default: (id: AnswersID) => {}
    },
    current: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const selectTopic = 'bg-blue-450';
    const selectSerial = 'bg-blue-450';
    const store = useImageStore();
    const imageUrlList = computed(() => store.state.images);
    const homeWorkstore = useCurrectStdStore();
    const subjectList = computed(() => homeWorkstore.state.currentSubjectList);

    return () => (
      <div class="w-full ">
        <div class="w-auto h-r3.5 leading-r2.85 overflow-y-hidden overflow-x-scroll text-gray-350  whitespace-nowrap">
          {subjectList.value?.map((node) => {
            return (
              <span
                key={node.test_id}
                onClick={() => {
                  homeWorkstore.state.currentSubject = node;
                  //与照片关联
                  props.setBySubjectCurrent(node.id);
                  // props.setCurrent(1,node.id);
                }}
                class={
                  ' overflow-hidden  inline-block  h-r2.85 w-r9.45 bg-white opacity-60  rounded-r14.25 text-center m-2  mt-1 mb-1  text-r1.3 font-regular leading-r2.85 ' +
                  (homeWorkstore.state.currentSubject?.test_id === node.test_id ? 'bg-blue-450 text-primary-lighter opacity-100 ' : '')
                }
              >
                {node.name}
              </span>
            );
          })}
          {/* <span
            class={' overflow-hidden  inline-block h-r2.85 w-r9.45 bg-blue-450  rounded-r14.25 text-center m-2  text-r1.3  leading-r2.85 text-primary-lighter'}
          >
            第一题第一问
          </span> */}
        </div>
        <div class="w-auto h-r2.85 overflow-y-hidden overflow-x-scroll whitespace-nowrap text-blue-350 mb-1">
          {imageUrlList.value.map((node, idx) => (
            <span
              onClick={() => {
                props.setCurrent(idx + 1, node.id);
              }}
              class={
                ' inline-block h-r2.3 w-r2.3 m-2 mt-1 mb-1  border-blue-350 text-center border bg-white  rounded-r11.5 border-solid  text-r1.3  leading-r2 ' +
                (props.current === idx + 1 ? 'bg-blue-450 text-primary-lighter border-solid border-blue-450 ' : '')
              }
            >
              {idx + 1}
            </span>
          ))}
        </div>
      </div>
    );
  }
});
